<template>
	<view class="app-container">
		<!-- 悬浮分享弹框 -->
		<view v-show="false" class="" @click.stop="shareCoupon(skuId, product.skuSwiperImg)">
			<button class="sharing-btn" open-type="contact">
				<drag-button
					:isDock="true"
					:existTabBar="false"
					/>
				客服
			</button>
		</view>

		<view class="header-box" :style="{paddingTop: `${safeArea.top}px`}">
			<view class="header-box-container">
				<image mode="aspectFit" src="../../../static/logo.png" class="logo"></image>
				<view class="header-title" >{{appName}}</view>
			</view>
		</view>
		<view class="page_bg" :style="{height:`calc(488rpx - ${safeArea.top}px)`}"></view>
		<view class="home-body-box" :style="{paddingTop: `${safeArea.top}px`}">
			
			<navigator class="inputp" url="" hover-class="none-hover" @click="gouSearch">
				<view class="input-tips">请输入商品</view>
				<uni-icons type="search" size="18" color="#FC5F5C" style="font-weight: bold;"></uni-icons>
			</navigator>
			<!-- 轮播图（新改版） -->
			<view style="margin: 0 24rpx; margin-top: 24rpx;" v-if="!returnStatus">
				<u-swiper class="mid-swiper" border-radius="20" height="360" mode="none" :list="imgList" @click="swiperClick">
				</u-swiper>
			</view>
			
			<!-- 广告通知 -->
			<view class="ad-box">
				<image src="../../../static/image/notice_tips.png" mode="aspectFit" class="notice-icon"></image>
				<view class="notice-container">
					<uni-notice-bar show-icon scrollable background-color="#F7F8FA" color="#FC5F5C" text="好消息! 好消息! 热烈庆祝商城开业, 全场大欢购!!!" />
				</view>
			</view>
			
			
			<!-- 专题板块 -->
			<view class="btn-card" style="margin-top: 10rpx; ">
				<swiper :class="showHeight" style="border-radius: 10rpx;">
					<swiper-item v-for="(itemList, indexList) in categoryList" :key="indexList"
						style="border-radius: 10rpx;;">
						<u-grid :border="false" :col="colData">
							<u-grid-item v-for="(item, index) in itemList" :key="index" @click="toSubjectList(item)">
								<!-- <image class="grid-image" :src="item.img"></image> -->
								<u-icon :name="item.icon" :size="100" imgMode="aspectFill"></u-icon>
								<text class="grid-text">{{ item.name }}</text>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>			
			
			<!-- 新品推荐 -->
			<view  class="goods-column">
				<view class="special-title">
					<view class="title"><text class="green-title">优品</text>推荐</view>
				</view>
				<view class="goods-card" @click="goShopInfoPage(hotSaleSku)">
					<image mode="aspectFill" :src="hotSaleSku.imgUrl" class="thumb"></image>
					<view class="goods-title">{{hotSaleSku.skuName}}</view>
					<image src="https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/07/27/f15267a2-6aef-404a-9f0b-279e86384f54.png" class="card-icon"></image>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="special-title" style="margin: 40rpx 24rpx 0;">
				<view class="title"><text class="green-title">优品</text>列表</view>
			</view>
			<view class="goods-list">
				<view v-for="(item, index) in skuList" :key="index" class="goods-item" @click="goShopInfoPage(item)">
					<image :src="item.skuImg" mode="aspectFill" class="sku-img"></image>
					<view class="title">{{ item.skuTitle }}</view>
					<view v-if="item.isActivity == '1'" style="display: flex;flex-direction: row; padding-left: 20rpx; margin-top: 5rpx;">
						<view style="text-decoration:line-through; font-size: 28rpx; color: darkgray;">
							{{item.linePrice}}
						</view>
						<view style=" border-radius: 5rpx; margin-left: auto; margin-right: 5rpx; height: 36rpx;font-size: 20rpx; padding: 2rpx 10rpx; background: #FF3333; color: #FFFFFF;">
							促销
						</view>
					</view>
					<view class="price-item">
						<view class="price-box">￥{{ item.skuPrice.toFixed(2) }}</view>
						<image src="../../../static/image/cart-green.png" mode="aspectFit" class="cart-icon"></image>
					</view>
					<!-- <view class="icon-image">
						{{item.skuType == 1?'商品':(item.skuType == 2 && item.skuServiceType == 2?'配送':'到店')}}
					</view> -->
				</view>
			</view>
			<view v-if="finished" class="no-more-tip">没有更多了</view>
		</view>
	</view>

</template>
<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			dragButton
		},
		data() {
			return {
				appName: 'OJ原聚酒小二',
				colData: 4,
				navBg: {
					background: "rgba(235, 233, 255, 0.0)"
				},
				queryParam: {
					spuAddType: 0,
					search: null,
					pageNum: 1
				},
				imgList: [],
				categoryList: [],
				skuList: [],
				// 商品查询完成
				finished: false,
				returnStatus: false,
				showHeight: 'heightOne',
				shopList: [],
				shopLocationH: 'shop-list-one',
				isDelShow: false,//判断是否出现删除标志
				safeArea: {},
				hotSaleSku: {}, // 热销商品
				seckillList: [], // 秒杀商品
				levelCategorys:[]//所有分类
			};
		},
		onLoad() {
			const that = this
			// 轮播图
			this.getSwiperList();
			// 专题
			// this.getSubjectList();
			// 商品列表
			this.getSkuList();
			// 商品分类
			this.getCommodityClass();
			// 热销商品
			this.getHotSale()
				
			/* 持续获取定位测代码  开始 */
			// const _locationChangeFn = function(res) {
			// 	console.log('location change', res)
			// }
			// setInterval(function(date) {
			// 	wx.startLocationUpdateBackground({
			// 		success(res) {
			// 			console.log('开启后台定位', res)
			// 			// wx.onLocationChange(_locationChangeFn)
			// 			// wx.offLocationChange(_locationChangeFn)
			// 		},
			// 		fail(res) {
			// 			console.log('开启后台定位失败', res)
			// 			wx.openSetting({
			// 				success: ops => {
			// 					console.log(ops);
			// 				}
			// 			})
			// 		}
			// 	})
			// }, 10000)
			/* 持续获取定位测代码  结束 */
			
			/* 服务通知测试代码 */
			// wx.requestSubscribeMessage({
			// 	tmplIds: [
			// 		'fEmeoDKR8ieRcwyMDEMxUbqSYDSKgBjQ_5_chue9IZg',
			// 		'cvI91E6vJLnWixT-f_ZsYsZkrM5OxtZc0zJjVZc2wC8',
			// 		'RMdm0qwENuYtNkyba3P8g1Ztfv0Yhg3hkAhJdj4GUxo'
			// 	],
			// 	success: (res) => {
			// 		console.log(res);
			// 	}
			// })
			/* 结束 */

		},
		onShow() {
			/** 测试即时配送 */
			// uni.navigateTo({
			// 	url: '/pagesB/delivery/postion'
			// })
			/** 测试即时配送 ****************/
			
			
			// 获取秒杀数据
			this.getSeckillSku()
			
			
			const that = this
			// 刷新定位
			uni.getSetting({
				success: res => {
					console.log(res.authSetting['scope.userLocation']);
					if (res.authSetting['scope.userLocation']) {
						uni.getLocation({
							type: 'gcj02',
							success: function(respp) {
								console.log("当前位置的经度：" + respp.longitude);
								console.log("当前位置的纬度：" + respp.latitude);
								uni.setStorageSync('location', respp.latitude + "," + respp
									.longitude)
								// 附近店铺
								that.getShopList()
							}
						})
					}
				}
			})
				
			
			if (uni.getStorageSync('authStatus') == true) {
				this.$api.request.getShopCart({}, res => {
					// this.cartList=res.data
					if (res.data.length > 0) {
						uni.setTabBarBadge({
							index: 2,
							text: res.data.length.toString()
						})
					} else {
						uni.removeTabBarBadge({
							index: 2
						})
					}
				})
			}
			this.safeArea = uni.getSystemInfoSync().safeArea
		},
		// 拉到底部 触发加载新一页商品
		onReachBottom() {
			if (!this.finished) {
				this.queryParam.pageNum++;
				this.getSkuList();
			} else {
				this.$u.toast("没有更多了...");
			}
		},
		onPullDownRefresh() {
			this.queryParam.pageNum=1;
			this.getSkuList();
			console.log('onPullDownRefresh');
		},
		methods: {
			// 秒杀商品
			getSeckillSku(){
				this.$api.request.getSeckillSku({}, res => {
					if(res.code == 200){
						console.log(res.data);
						this.seckillList = res.data
					}
				})
			},
			// 热销
			getHotSale(){
				this.$api.request.getHotSale({},res => {
					if(res.code == 200){
						this.hotSaleSku = res.data
					}
				})
			},
			// 跳转到搜索页面
			gouSearch(){
				uni.switchTab({
					url: '/pages/sys/home/allProduct'
				})
			},
			// 清除输入框
			clearSearch(){
				this.queryParam.search = null,
				this.isDelShow = false;
			},
			//监听输入
			inputChange(event){
				//判断输入框是否有值输入，决定是否出现删除符号
					if (this.queryParam.search.length>0) {
						console.log(this.queryParam.search.length)
						this.isDelShow = true;
						console.log("大过零")
					}else{
						this.isDelShow = false;
						console.log("不大于零")
					}
			},
			// VIP 会员专区
			meridianPoint() {
				const that = this
				try {
					if(uni.getStorageSync('userInfo').id){
						uni.navigateTo({
							url: '/pagesB/vip/select/index',
						})
					}else {
						uni.navigateTo({
							url: '/pages/sys/common/login'
						})
					}
				}
				catch(err) {
					uni.navigateTo({
						url: '/pages/sys/common/login'
					})
				}
			},

			// 获取第一级商品分类菜单
			getCommodityClass() {
				this.$api.request.catalogList({
					catalogType: 0
				}, res => {
					this.levelCategorys = res.data;
					let c1 = [];
					var length = this.levelCategorys.length;
					var n = Math.ceil(length / 12);
					for(var i=0;i<n;i++){
						var first = i * 12;
						var c2 = [];
						c1.push(c2);
						for(var j=first;j<length;j++){
							c2.push(this.levelCategorys[j])
							if(c2.length===12){
								break;
							}
						}
						 
					}
					this.categoryList = c1;
					var tierNum = Math.ceil(length / 4);
					if(tierNum===1){
						this.showHeight = 'heightOne'
					}else if(tierNum===2){
						this.showHeight = 'heightTwo'
					}else if(tierNum===3){
						this.showHeight = 'height3'
					}
					console.log("><<<"+this.showHeight)
				})
			},
			//进入商品购物页面
			goShopInfoPage(item) {
				uni.navigateTo({
					url: '/pages/sys/home/product?id=' + item.skuId
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/sys/common/search"
				})
			},
			/** 获取商品列表 */
			getSkuList() {
				let that = this;
				this.$api.request.mainSkuList(this.queryParam, res => {
					if (res.code == 200) {
						if (that.queryParam.pageNum > 1) {
							res.data.products.forEach(item => that.skuList.push(item));
						} else {
							that.skuList = res.data.products;
						}
						if (res.data.totalPages <= res.data.pageNum) {
							that.finished = true;
						}
					}
				});
			},
			// 跳转专题商品列表
			toSubjectList(item) {
				console.log(item);
				if (item.subTitle == '第一层') {
					let skuType = 1
					if (item.name == '钟点工' || item.name == '到店服务') {
						skuType = 2
					}
					this.queryParam.skuType = skuType
					// 获取导航数据
					this.$api.request.getHomeSubjectList({
						hosId: item.id,
					}, res => {
						this.categoryList = res.data
						this.returnStatus = true
						this.showHeight = res.data[0].length > 5 ? 'heightTwo' : 'heightOne'
						// this.colData = res.data.length > 1 ? 5 : (res.data[0].length > 4 ? 5 : 4)
						this.getSkuList()
					})

				} else {
					const homeClickedCategory = this.levelCategorys.filter(v=>{return v.id===item.id})[0];
					uni.setStorageSync('homeClickedCategory',homeClickedCategory)
					if(homeClickedCategory.children.length===0){
						uni.navigateTo({
							url: "/pages/sys/common/search",
							success: res => {
								res.eventChannel.emit('item', item)
							}
						})
					}else{
						uni.navigateTo({
							url: "/pages/sys/common/subpage",
							success: res => {
								res.eventChannel.emit('item', item)
							}
						})
					}
				}

			},
			/** 查询所有店铺 */
			goAllShopPage() {
				const that = this
				if (uni.getStorageSync('location')) {
					uni.navigateTo({
						url: '/pagesB/shop/allShop/location'
					})
				} else {
					// 获取用户授权情况
					uni.getSetting({
						success: resp => {
							console.log(resp.authSetting['scope.userLocation']);
							if(!resp.authSetting['scope.userLocation']){
								// 授权定位
								uni.getLocation({
									type: 'wgs84',
									success: function(respp) {
										console.log("当前位置的经度：" + respp.longitude);
										console.log("当前位置的纬度：" + respp.latitude);
										uni.setStorageSync('location', respp.latitude + "," + respp.longitude)
										uni.navigateTo({
											url: '/pagesB/shop/allShop/location'
										})
									},fail(err) {
										uni.showModal({
											title: '',
											content: '请在系统设置中打开定位服务,开启后需要授权才能使用地图功能',
											confirmText: '确定',
											success: function (res) {
												uni.openSetting({
													success(auth) {
														 if (auth.authSetting['scope.userLocation']) {
														      // 授权成功，重新定位
														      uni.getLocation({
														        success: location => {
																	uni.setStorageSync('location', location.latitude + "," + location.longitude)
																	uni.navigateTo({
																		url: '/pagesB/shop/allShop/location'
																	})
																}
														      });
														    } else {
														      // 没有允许定位权限
														      uni.showToast({
														        title: '您拒绝了定位权限，将无法使用位置功能',
														        icon: 'none'
														      });
														    }
													}
												})
											}
										})
									}
								})
							}else {
								uni.navigateTo({
									url: '/pagesB/shop/allShop/location'
								})
							}
						}
					})
				}				
			},
			/** 查询 */
			searchSkuList() {
				this.queryParam.pageNum = 1;
				this.getSkuList();
			},
			/** 跳转 */
			navTo(url) {
				if (uni.getStorageSync('authStatus') == true) {
					uni.navigateTo({
						url: url
					})
				} else {
					const that = this
					uni.getUserProfile({
						desc: "获取你的昵称、头像、地区及性别",
						success: (res) => {
							console.log(res);
							uni.showLoading({
								//title: '加载中'
							});
							this.$api.request.userLoginOrAdd({
								encryptedData: res.encryptedData,
								iv: res.iv,
								sessionKey: this.session_key,
								wechatId: uni.getStorageSync('openId'),
								sourceType: "APP",
								nickName: res.userInfo.nickName,
								avatarUrl: res.userInfo.avatarUrl
							}, resp => {
								console.log(resp);
								uni.hideLoading();
								if (resp.code == 200) {
									this.$store.commit("setToken", resp.data.tokenValue)
									this.$store.commit("login", resp.data);
									uni.setStorageSync('authStatus', true)
									this.$api.request.userInfo({}, res => {
										if (res.code == 200) {
											uni.setStorageSync('userInfo', res.data)
											setTimeout(() => {
												uni.navigateTo({
													url
												})
											}, 500)

										}
									})

								}
							})
						}
					})
				}
			},
			/** 轮播点击 */
			swiperClick(index) {
				let item = this.imgList[index];
				uni.navigateTo({
					url: '/pages/sys/home/product?id=' + this.imgList[index].skuId
				})
				/**
				 * 新代码
				 */
				// uni.navigateTo({
				// 	url: item.url
				// })

				// this.$api.request.addSwiperCount({
				//   id: item.id
				// }, res => this.navTo(item.url));
			},
			/** 获取轮播图列表 */
			getSwiperList() {
				try {
					this.$api.request.swiperList(res => this.imgList = res.data);
					console.log(this.imgList.length+"长度")
				} catch (e) {
					console.log(e);
				}
			},
			/** 获取专题列表 */
			getSubjectList() {
				try {
					// this.$api.request.getHomeTypeData({}, res => {
					// 	this.categoryList = res.data
					// 	this.returnStatus = false
					// 	this.showHeight = res.data[0].length > 5?'heightTwo':'heightOne'
					// 	this.colData = res.data.length > 1? 5:(res.data[0].length > 4? 5:4)
					// })
					this.$api.request.subjectList(res => {
						this.categoryList = res.data
						this.showHeight = res.data[0].length > 5 ? 'heightTwo' : 'heightOne'
						// this.colData = res.data.length > 1 ? 5 : (res.data[0].length > 4 ? 5 : 4)
					});
				} catch (e) {
					console.log(e);
				}
			},
			/** 返回第一层 */
			resetData() {
				delete this.queryParam.skuType
				this.getSubjectList()
				this.getSkuList()
				this.getShopList()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		width: 100vw;
		position: relative;
		.page_bg{
			background: linear-gradient(360deg, rgba(0,155,101,0) 0%, #FC5F5C 40%, #FC5F5C 100%);
			height: 488rpx;
			// height: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
		.top-bar-left {
			display: flex;
			height: 42rpx;
			margin-left: 20rpx;
		}

		.mid-swiper {
			// margin: 32rpx 23rpx 5rpx;
			width: 704rpx;
			height: 280rpx;
		}

		.btn-card {
			width: calc(100% - 46rpx);
			margin: 0 23rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			// box-shadow: 0rpx 0rpx 4rpx 3rpx #DDDDDD;

			.grid-image {
				width: 71rpx;
				height: 71rpx;
			}

			.grid-text {
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 20px;
				margin-top: 10rpx;
			}
		}

		.guess-like {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 23rpx 0;
			margin-top: 50rpx;
		}

		.water-fall-box {
			margin: 0 23rpx;
		}

		/* 商品列表 */
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			// column-count: 2;
			// column-gap: normal;
			padding: 20rpx 23rpx;
			margin-top: 10rpx;

			.goods-item {
				width: 49%;
				break-inside: avoid;
				// width: 100%;
				height: 100%;
				display: flex;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				// padding: 0 10rpx 10rpx;
				flex-direction: column;
				background: #FFFFFF;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
				// position: relative;

				&:nth-child(2n+1) {
					margin-right: 2%;
				}

				.sku-img {
					width: 340rpx;
					height: 340rpx;
					min-height: 300rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}

				.title {
					color: #111111;
					font-weight: bold;
					margin: 0 20rpx;
					font-size: 28rpx;
					line-height: 30rpx;
					margin-top: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.sub-title {
					color: #9B9B9B;
					font-size: 22rpx;
					overflow: hidden;
					margin: 0 20rpx;
					margin-top: 10rpx;
					line-height: 26rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.price-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 16rpx 20rpx 0;
				}
				.price-box {
					color: #FC5F5C;
					font-size: 28rpx;
					line-height: 30rpx;
					font-weight: bold;
				}
				.cart-icon{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.no-more-tip {
			width: 100%;
			height: 24rpx;
			color: #B7B7B7;
			text-align: center;
			margin-bottom: 75rpx;
		}
	}
	
	.shop-list-row-x{
		width: auto;
		margin: 0 24rpx;
		margin-top: 25rpx;
		display: flex;
		flex-direction: row;
		overflow-y: scroll;
		
		.shop-date-box{
			width: 220rpx;
			display: flex;
			flex-direction: column;
			margin-right: 20rpx;
			
			.shop-name-box{
				width: 220rpx;
				overflow: hidden; 
				text-overflow: ellipsis; 
				white-space: nowrap;
				height: 21px;
				font-size: 15px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 21px;
				margin-top: 10rpx;
			}
			
			.location-box-row{
				width: 220rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 6rpx;
				
				.kilometre-text{
					height: 18px;
					font-size: 13px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 18px;
					margin-left: 5rpx;
				}
			}
			
		}
		
	}
	
	.home-body-box{
		width: 100vw;
		height: auto;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		// background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 12%, #F5F6F7 100%);
		z-index: 3;
		position: relative;
		top: 80rpx;
		left: 0;
		.ad-box{
			display: flex;
			align-items: center;
			padding: 8rpx 15rpx 8rpx 30rpx;
			border-radius: 36rpx;
			background: #F7F8FA;
			margin: 15rpx 24rpx 0;
			.notice-icon{
				width: 64rpx;
				height: 30rpx;
				margin-right: 22rpx;
			}
			.notice-container{
				flex: 1;
				overflow: hidden;
				position: relative;
				&:before{
					content: "";
					position: absolute;
					margin: auto;
					height: 30rpx;
					left: 0;
					top: 0;
					bottom: 0;
					width: 2rpx;
					background: #EBECF0;
				}
			}
			::v-deep .uni-noticebar{
				margin-bottom: 0;
				border-radius: 36rpx;
			}
			::v-deep .uni-noticebar-icon{
				margin-top: -5rpx;
			}
		}
	}

	.return-text {
		color: #000000;
		margin-left: 30rpx;
		padding-top: 90rpx;
		margin-bottom: 30rpx;
	}

	.heightOne {
		height: 170rpx !important;
	}

	.heightTwo {
		height: 360rpx !important;
	}
	.height3 {
		height: 530rpx !important;
	}

	.shop-list {
		width: auto;
		height: 30vh;
		overflow-y: scroll;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
	}

	.shop-list-one {
		width: auto;
		height: auto;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background: #FFFFFF;
	}

	.title-project-body-title {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		// border-radius: 10rpx;
		// box-shadow: 2rpx 0rpx 4rpx 3rpx #c4c6c9;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.order-info-text {
		width: calc(100vw - 360rpx);
		display: flex;
		flex-direction: column;
	}

	.card-money-box {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: auto;
		margin-right: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.total-amount-box {
		width: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-weight: 500;
		margin-right: 20rpx;
	}
	.goods-column{
		margin: 20rpx 24rpx 0;
		.goods-card{
			border-radius: 16rpx;
			height: 400rpx;
			position: relative;
			overflow: hidden;
			margin-top: 30rpx;
			.thumb{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
			.goods-title{
				position: absolute;
				height: 40rpx;
				line-height: 40rpx;
				bottom: 10rpx;
				left: 10rpx;
				right: 10rpx;
				font-size: 28rpx;
				color: #fff;
				z-index: 2;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.card-icon{
				position: absolute;
				z-index: 2;
				width: 160rpx;
				height: 160rpx;
				top: 10rpx;
				right: 10rpx;
			}
		}
	}
	.special-title{
		font-size: 32rpx;
		position: relative;
		font-family: 'DOUYU';
		font-style: italic;
		font-weight: bold;
		text-align: center;
		color: #111111;
		.green-title{
			color: #FC5F5C;
		}
		&:before{
			content: "";
			width: 70rpx;
			height: 2rpx;
			background: #D2D2D2;
			position: absolute;
			left: 28%;
			top: 50%;
		}
		&:after{
			content: "";
			width: 70rpx;
			height: 2rpx;
			background: #D2D2D2;
			position: absolute;
			right: 28%;
			top: 50%;
		}
	}
	.bottom-home-box {
		width: auto;
		height: 120rpx;
		margin: 0 26rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.service-type-box {
		height: 120rpx;
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		color: #000000;
		border: 1rpx solid #DDDDDD;
		border-radius: 10rpx;
	}

	.text-show {
		width: auto;
		height: 120rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.icon-image {
		width: 80rpx;
		height: 40rpx;
		background: #4CA775;
		border-radius: 2px;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		// background: #D2B48C;
		// border-top-left-radius: 10rpx;
		// border-bottom-right-radius: 15rpx;
	}

	.right-show-allshop {
		margin-left: auto;
		margin-right: 10rpx;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 400;
		color: #444444;
		line-height: 21px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.u-swiper-wrap ::before{
		border-radius: 10rpx !important;
	}
	
	.inputp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 50rpx;
		background: #fff;
		padding: 14rpx 24rpx;
		margin: 16rpx 24rpx 0;
		.input-tips{
			font-size: 26rpx;
			color: #999;
		}
		.inputs {
			background: #F2F2F2;
			border-radius: 36rpx;
			position: relative;
	        display: flex;
			align-items: center;
			// background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 12%, #F5F6F7 100%) !important;
			background: linear-gradient(180deg, #FFFFFF 100%, #FFFFFF 100%, #FFFFFF 100%) !important;
			border: 1px solid rgba(76, 167, 117, 1);			
			
			.scaninput {
				width: 500rpx;
				height: 60rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				//background-color: #007AFF;
			}
	
			.searchimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				left: 20upx;
			}
	
			.scanimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				right: 36rpx;
			}
	
			.searchbtn {
				position: absolute;
				//right: 20upx;
				//top: 15upx;
				// border-radius: 5upx;
				//margin-right: -250rpx;
				background-color: rgba(76, 167, 117, 1);
				color: #fff;
				width: 4em;
				line-height: 2em;
				text-align: center;
				font-size: 0.8em;
				
			}
			.scan_weizhi{
				display: flex;
				justify-content: flex-end;
				height: 65rpx;
				position: relative;
				right: -6rpx;
				.scan_btn{
					width: 140rpx;
					height: 68rpx;
					color: #FFF;
					background: linear-gradient(145deg, #33CA7C 0%, #48EB9C 100%);
					border-radius: 40rpx;					
					display:flex;
					flex-direction:row;    
					align-items: center;
					justify-content:center;
					margin-right: -2rpx;
					margin-top: -2rpx;
				}
			}
			
		}
	}
	
	.jingluo-body-box{
		width: auto;
		// height: 340rpx;
		display: flex;
		flex-direction: row;
		margin: 0 24rpx;
		margin-top: 38rpx;
		justify-content: space-between;
		
		.left-image-bg{
			// flex-grow: 1;
			width: 50%;
			height: 340rpx;
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			padding-top: 26rpx;
			background: #E4F2EF;
			border-radius: 16rpx;
			background-image: url("../../../static/home/pintuan.png");
			background-size: 100% 100%;
			
			.top-title-text{
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FC5F5C;
				line-height: 44rpx;
			}
			
			.centent-title-text{
				// width: 56px;
				height: 72rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FC5F5C;
				line-height: 36rpx;
				margin-top: 10rpx;
			}
		}
		
		.right-tb-box{
			width: 50%;
			display: flex;
			flex-direction: column;
			align-content: space-between;			
			// height: 340rpx;
			margin-left: 20rpx;
			
			.top-images {
				width: auto;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				padding-top: 20rpx;
				background: #EDF2FF;
				border-radius: 16rpx;
				background-image:  url("@/static/home/vip.png");
				background-size: 100% 100%;
				
				.right-top-title-text{
					height: 22px;
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #BA763B;
					line-height: 22px;
				}
				
				.right-top-centent-text{
					height: 18px;
					font-size: 13px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #BA763B;
					line-height: 18px;
					margin-top: 10rpx;
				}
				
			}
			
			.bottom-images {
				width: auto;
				height: 160rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				padding-top: 20rpx;
				background: #FEEEE4;
				border-radius: 16rpx;
				background-image:  url("@/static/home/mkt.png");
				background-size: 100% 100%;
				
				.right-bottom-title-text {
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #4069EB;
					line-height: 44rpx;					
				}
				
				.right-bottom-centent-text {
					height: 36rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #4069EB;
					line-height: 36rpx;
					margin-top: 10rpx;
				}
				
			}
		}
	}
.header-box{
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	padding-left: 24rpx;
	background: #FC5F5C;
	.header-box-container{
		height: 76rpx;
		display: flex;
		align-items: center;
		.logo{
			width: 48rpx;
			height: 48rpx;
			margin-right: 12rpx;
			border-radius: 100%;
		}
		.header-title{
			font-size: 32rpx;
			margin-left: 12rpx;
			color: #fff;
		}
	}
}
</style>
